<template>
  <div class="home">
    <Wapper height="100vh" :bgImg="bgImg">
      <template #header>
        <HeaderContent />
      </template>
      <template #main>
        <ArticleItem />
        <el-pagination background layout="prev, pager, next" :total="100" />
      </template>
      <template #aside>
        <Aside>
          <NewestArticle />
          <AsideTags />
        </Aside>
      </template>
    </Wapper>
  </div>
</template>

<script>
import Wapper from "$components/Wapper";
import HeaderContent from "./components/HeaderContent";
import ArticleItem from "$components/article/ArticleItem";
import Aside from "$components/aside/Aside";
import NewestArticle from "$components/aside/NewestArticle";
import AsideTags from "$components/aside/AsideTags";
export default {
  name: "Home",
  components: {
    Wapper,
    HeaderContent,
    ArticleItem,
    Aside,
    NewestArticle,
    AsideTags,
  },
  data() {
    return {
      bgImg:
        "/bg.jpg",
    };
  },
};
</script>

<style lang="stylus" scoped>
.home >>> .el-header {
  background-attachment: fixed;
}
</style>